<template>
  <Loading v-if='!loading'></Loading>
  <div v-else>
    <div class="book-searching">
      <div class="searching-wrapper">
        <div>
          <input type="text" placeholder="请输入搜索内容" v-on:input='inputFun()' v-model="val">
          <div class="del" v-show='searching' @click='inputDel'></div>
        </div>
        <span @click="searching ? $router.push({path: '/search', query: {val: val}}) : ''">确定</span>
      </div>
      <div class="searching-body" v-show='!searching'>
        <div class="searching-section">
          <div class="searching-view">
            <div class="searching-title">
              <div class="searching-title-left">搜索热词</div>
              <div class="searching-title-right" @click="randomSearchHotWord()">换一批</div>
            </div>
            <router-link
              v-for="(item, index) in showSearchHotWords"
              :key='index'
              :to="{path: '/search', query:{val: item.word}}"
              class="searching-content"
              :style="{backgroundColor: searchHotWordBackgoundColor[index]}"
            >
              {{ item.word }}
            </router-link>
          </div>
        </div>

        <div class="searching-section">
          <div class="searching-view">
            <div class="searching-title">
              <div class="searching-title-left">热门推荐</div>
              <div class="searching-title-right" @click="randomHotWord()">换一批</div>
            </div>
            <router-link
              v-for="(item, index) in showHotWords"
              :key='index'
              :to="{path: '/search', query:{val: item}}"
              class="searching-content"
              :style="{backgroundColor: hotWordBackgoundColor[index]}"
            >
              {{ item }}
            </router-link>
          </div>
        </div>

        <div class="searching-record">
          <div class="searching-title">
            <div class="title">搜索历史</div>
            <div class="right">删除历史</div>
          </div>
          <router-link
            class="list"
            v-for="(item, index) in searchRecord"
            :to="{path: '/search', query:{val: item}}"
            :key="index"
          >
            {{ item }}
          </router-link>
        </div>
      </div>
      <div class="searching-results-view" v-show='searching'>
        <ul>
          <li class="li" v-for='(item, index) in keywords' :key='index'>
            <router-link :to="{path: '/search', query:{val: item}}">{{ item }}</router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import Loading from '@/components/loading/loading.vue';
import API from '../../api/api.js';
import store from 'storejs';
export default {
  components: {
    Loading
  },
  data() {
    return {
      // 随机显示搜索热词背景色
      searchHotWordBackgoundColor: ['#FFC0CB', '#7B68EE', '#FF69B4', '#66CDAA', '#FA8072', '#228B22', '#90c5f0', '#f6bc7e', '#67ccb7', '#e78f8f', '#FA8072', '#228B22', '#FFC0CB', '#7B68EE', '#FF69B4'],
      hotWordBackgoundColor: ['#FA8072', '#7B68EE', '#e78f8f','#FFC0CB', '#FF69B4', '#66CDAA'],
      searchHotWords: [],   // 搜索热词
      showSearchHotWords: [], // 处理后的随机搜索热词
      hotWords: [],      // 热门推荐
      showHotWords: [],  // 随机显示热词
      loading: false,
      searching: false,
      searchRecord: [],
      val: '',
      keywords: []
    }
  },
  mounted() {
    this.$store.state.isTabber = true;
    this.getSearchHotWord();
    this.getHotWord();
    this.getsearchRecord();
  },
  methods: {
    // 获取搜索历史（本地缓存）
    getsearchRecord: function () {
      if(store.get("searchRecord")) {
        this.searchRecord = store.get("searchRecord");
      }
    },
    // 获取搜索热词
    getSearchHotWord: function() {
      this.axios.get(API.book.searchHotWord)
        .then((res) => {
          // console.log('搜索热词', res);
          this.searchHotWords = res.data.searchHotWords;
          this.randomSearchHotWord();
        })
        .catch((res) => {
          console.log('搜索热词error', res);
        });
    },

    // 获取热门推荐
    getHotWord: function() {
      this.axios.get(API.book.hotWord)
        .then((res) => {
          // console.log('热门推荐', res);
          this.hotWords = res.data.hotWords;
          this.randomHotWord();
          this.loading = true;
        })
        .catch((res) => {
          console.log('热门推荐error', res);
        });
    },
    // 搜索
    inputFun: function() {
      console.log(this.val);
      this.searching = true;
      this.axios.get(API.book.bookSearchRealTime(this.val))
        .then((res) => {
          // console.log('搜索结果-成功', res);
          this.keywords = res.data.keywords;
          console.log('this.keywords', this.keywords);
        })
        .catch((res) => {
          console.log('搜索结果-失败', res);
        });
    },
    inputDel: function() {
      this.searching = false;
    },
    // 随机热门推荐
    randomHotWord: function() {
      let temHotWord = Array();
      let temShowHotWord = Array();

      // 随机打乱热门推荐词数组
      temHotWord = this.shuffle(this.hotWords);
      // 取随机打乱热词数组的前6个并追加至显示热词
      for (let i = 0; i < 6; i++) {
        temShowHotWord.push(temHotWord[i]);
      }
      this.showHotWords = temShowHotWord;
    },

    //随机搜索热词
    randomSearchHotWord: function() {
      let temSearchHotWord = Array();
      let temShowSearchHotWord = Array();

      // 随机打乱热词数组
      temSearchHotWord = this.shuffle(this.searchHotWords);
      // 取随机打乱热词数组的前15个并追加至显示热词
      for (let i = 0; i < 15; i++) {
        temShowSearchHotWord.push(temSearchHotWord[i]);
      }
      this.showSearchHotWords = temShowSearchHotWord;
    },

    // 随机打乱数组
    shuffle: function(arr) {
      let i = arr.length;
      while (i) {
        let j = Math.floor(Math.random() * i--);
        [arr[j], arr[i]] = [arr[i], arr[j]];
      }
      return arr;
    }
  }
};
</script>
<style lang='scss' scoped>
  .book-searching{
    width: 100%;
    height: 100%;
    padding: .8rem .8rem 4rem;
    .searching-wrapper{
      width: 100%;
      & > div {
        position: relative;
        width: 16rem;
        height: 1.867rem;
        background-color: #ebebf0;
        border-radius: 0.933rem;
        background-image: url();
        background-repeat: no-repeat;
        background-size: .96rem .96rem;
        background-position: 0.533rem;
        padding: 0 1.6rem;
        margin-bottom: 1.067rem;
        display: inline-block;
        & > input{
          width: 100%;
          height: 1.867rem;
          background-color: #ebebf0;
          border-style: none;
          padding: 0.613rem;
          font-size: 0.64rem;
        }
      }
      & > span{
        color: #748389;
        font-size: .8rem;
        display: inline-block;
        line-height: 1.867rem;
        margin-left: 0.533rem;
      }
      .del{
        display: inline-block;
        width: .8rem;
        height: .8rem;
        position: absolute;
        top: 0.533rem;
        right: 0.533rem;
        background-image: url();
        background-size: 100% 100%;
        z-index: 999;
      }
    }
  }
  .searching-view, .searching-record{
    width: 100%;
    overflow: hidden;
    margin-bottom: 1.6rem;
    .searching-title{
      position: relative;
      width: 100%;
      height: 1.6rem;
      margin-bottom: 0.747rem;
      .searching-title-left, .title{
        position: absolute;
        top: 0;
        left: 0;
        height: 1.6rem;
        line-height: 1.6rem;
        font-size: 1.173rem;
        color: #6b6b6b;
      }
      .searching-title-right, .right{background-image: url();
        background-size: 0.853rem 0.853rem;
        background-position: 100%;
        background-repeat: no-repeat;
        position: absolute;
        bottom: 0;
        right: 0;
        padding-right: 1.067rem;
        line-height: 1.6rem;
        font-size: .64rem;
        color: #FFC0CB;
      }
    }
  }
  .searching-content{
    float: left;
    padding: 0 0.533rem;
    margin: 0 0.533rem 0.533rem 0;
    height: 1.6rem;
    line-height: 1.6rem;
    font-size: .64rem;
    color: #fff;
    border-radius: .8rem;
  }
  .searching-results-view{
    width: 100%;
    .li{
      max-width: 90%;
      height: 2.773rem;
      padding-left: 1.28rem;
      background-image: url();
      background-repeat: no-repeat;
      background-size: 0.853rem 0.853rem;
      background-position: 0;
      font-size: 0.907rem;
      line-height: 2.773rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      a{
        display: inline-block;
        width: 100%;
        color: #222;
      }
    }
  }
  .searching-record{
    .searching-title{
      .right{
        background: url();
        background-size: 0.853rem 0.853rem;
        background-position: 100%;
        background-repeat: no-repeat;
        color: #8a8a8f;
      }
    }
    .list{
      display: block;
      height: 2.773rem;
      font-size: 0.907rem;
      color: #9b9ba3;
      line-height: 2.773rem;
      border-bottom: 0.027rem solid #ebebf0;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
</style>